/*
 * @Author: zyk 997610780@qq.com
 * @Date: 2022-10-10 11:27:31
 * @LastEditors: zyk 997610780@qq.com
 * @LastEditTime: 2022-10-10 14:27:30
 * @FilePath: \fifty-small-projects\38手机tab切换\38.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * 
 */
let tabbar_items = document.querySelectorAll('.tabbar-item')

let imgs = document.querySelectorAll('img')
tabbar_items.forEach((item,index)=>{
  item.addEventListener('click',function(e){
    // let mouseX = +e.clientX
    // let mouseY = +e.clientY
  
    // let targetX = this.offsetLeft
    // let targetY = this.offsetTop
  
    // let left = mouseX - targetX
    // let top = mouseY - targetY
    
    // let ripple = createdRipple(left,top)
    // item.appendChild(ripple)

    // setTimeout(() => {
    //   ripple.remove()
    // }, 500);

    tabbar_items.forEach((el,i)=>{
      el.classList.remove('active')
      imgs[i].classList.remove('show')
    })
    imgs[index].classList.add('show')

    item.classList.add('active')
  })
})


function createdRipple(x,y){
  let div = document.createElement('div')
  div.classList.add('ripple')
  div.style.left = x+'px'
  div.style.top = y + 'px'
  return div
}